<template>
    <div class="app-container">
      <el-card class="filter-container" shadow="never">
        <div style="margin-top:15px">
        <el-button
          style="float:right; margin-right: 15px"
          type="primary"
          @click="handleSearchList()"
          size="small">
          Search
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="Examine Status:">
            <el-select v-model="listQuery.status" placeholder="Please enter" clearable>
              <el-option
                v-for="item in verifyStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="CID:">
            <el-input style="width: 203px" v-model="listQuery.chatterAccount" placeholder="Please enter"></el-input>
          </el-form-item>
          <el-form-item label="MID:">
            <el-input style="width: 203px" v-model="listQuery.modeUserCode" placeholder="Please enter"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
      <div class="table-container">
        <el-table ref="productCateTable"
                  style="width: 100%"
                  :data="list"
                  v-loading="listLoading" border>
          <el-table-column label="CID" width="100" align="center">
            <template slot-scope="scope">{{scope.row.chatterAccount}}</template>
          </el-table-column>
          <el-table-column label="Chatter Nickname" width="180" align="center">
            <template slot-scope="scope">{{scope.row.chatterName}}</template>
          </el-table-column>
          <el-table-column label="MID" width="180" align="center">
            <template slot-scope="scope">{{scope.row.modelUserCode}}</template>
          </el-table-column>
          <el-table-column label="Model Nickname" width="180" align="center">
            <template slot-scope="scope">{{scope.row.modeName}}</template>
          </el-table-column>
          <el-table-column label="Greeting" width="260" align="center">
            <template slot-scope="scope">{{scope.row.greetingContent }}</template>
          </el-table-column>
          <el-table-column label="Examine Status" width="140" align="center">
            <template slot-scope="scope">{{scope.row.status==1?"Pass":scope.row.status==3?"Fail":"Pending Review"}}</template>
          </el-table-column>
          <el-table-column label="Creation Time " width="180" align="center">
            <template slot-scope="scope">{{scope.row.gmtCreate }}</template>
          </el-table-column>
          <el-table-column label="Controls" width="320" align="center">
            <template slot-scope="scope" v-if="scope.row.status==0||scope.row.status==2">
              <a
                class="operation_item"
                @click="handleAuthentication(scope.$index, scope.row,0)">Pass The Examination
              </a>
              <a
                class="operation_item"
                style="color: #409EFF; margin-left:10px;"
                @click="handleAuthentication(scope.$index, scope.row,1)">Fail The Examination
              </a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.pageSize"
          :page-sizes="[10]"
          :current-page.sync="listQuery.pageNum"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
    import {fetchList,deleteProductCate,updateShowStatus,updateNavStatus} from '@/api/productCate'
    import {fetchGreetingList,fetchAuthentication} from '@/api/greeting'
    export default {
      name: "productCateList",
      data() {
        return {
          list: null,
          total: null,
          listLoading: true,
          listQuery: {
            pageNum: 1,
            pageSize: 5,
            chatterAccount:null,
            modeUserCode:null,
            status:null
          },
          parentId:0,
          verifyStatusOptions: [{
          value: 2,
          label: 'Pending Review'
        }, {
          value: 1,
          label: 'Pass'
        },{
          value: 3,
          label: 'Fail'
        }]
        }
      },
      created() {
        this.resetParentId();
        this.getList();
      },
      watch: {
        $route(route) {
          this.resetParentId();
          this.getList();
        }
      },
      methods: {
        resetParentId(){
          this.listQuery.pageNum = 1;
          if (this.$route.query.parentId != null) {
            this.parentId = this.$route.query.parentId;
          } else {
            this.parentId = 0;
          }
        },
        getList() {
          this.listLoading = true;
          var params = {
            "chatterAccount":this.listQuery.chatterAccount===''?null:this.listQuery.chatterAccount,
            "status":this.listQuery.status,
            "modeUserCode":this.listQuery.modeUserCode===''?null:this.listQuery.modeUserCode,
            "page":this.listQuery.pageNum,
            "pageSize":this.listQuery.pageSize,
          }
          fetchGreetingList(params).then(response => {
            this.listLoading = false;
            this.list = response.data.data;
            this.total = response.data.total;
          });
        },
        handleSearchList() {
          this.listQuery.pageNum = 1;
          this.getList();
        },
        handleAuthentication(index, row,poision) {
          this.$confirm(poision==0?'Pass review or not?':'Refuse review or not?', 'Prompt', {
            confirmButtonText: 'Confirm',
            cancelButtonText: 'Cancel',
            type: 'warning'
          }).then(() => {
            var params = {'greetingCode':row.greetingCode,'auditStatus':poision==0?1:3};
            fetchAuthentication(params).then(response => {
              this.getList();
              this.$message({
                message: 'Operation successful',
                type: 'success',
                duration: 1000
              });
            });
          })
    
          },
          handleSizeChange(val){
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.getList();
      },
        },
      filters: {
      }
    }
  </script>
  
  <style scoped>
   .operation_item{
    color: #409EFF; 
    border-bottom: 1px solid #409EFF;
    padding-bottom:2px;
  }
  </style>
  